<template>
	<view style="margin: 40rpx 40rpx;">
		<view class="header">
			<image :src="roleData.avatar" mode=""></image>
			<view style="margin-left: 20rpx;">
				<view class="text-doctor">
					<text style="font-size: 36rpx;"> {{ roleData?.name }}</text>
					<text style="margin-left: 20rpx; font-size: 28rpx; color:#999 ;">{{roleData.roleId?.name}}</text>
				</view><view class="text-doctor">
					<text style=" font-size: 28rpx; color:#999 ;">所属机构：</text>
					<text style=" font-size: 28rpx; color:#999 ;"></text>
				</view><view class="text-doctor">
					<text style=" font-size: 28rpx; color:#999 ;">  所属团队：</text>
					<text style=" font-size: 28rpx; color:#999 ;"></text>
				</view><view class="text-doctor">
					<text style=" font-size: 28rpx; color:#999 ;">签约人数：</text>
					<text style=" font-size: 28rpx; color:#999 ;">{{roleData.signNumber}}</text>
				</view>
			</view>
		</view>
		
		
		<view class="body">
			<view class="one" @click="toChatlin()">
				<image src="/static/常用_消息.png" mode=""></image>
				<text class="tetx">发送消息</text>
			</view>
			<view class="one" style="background-color: rgb(253, 219, 120);" @click="openProject">
				<image src="/static/icons/phone.png" mode=""></image>
				<text class="tetx">发送消息</text>
			</view>
			<view class="one" style="background-color: rgb(40, 208, 148);" @click="toApplyForServices(roleData._id)">
				<image src="/static/爱心服务-copy.png" mode=""></image>
				<text class="tetx">申请服务</text>
			</view>
		</view>
		<DoctorsProfile :intro='roleData.intro'></DoctorsProfile>
	</view>
	
	<uni-popup  ref="serviceProject" type="bottom" >
		<view class="eject-role" @click="closeProject">123123123123</view>
		<view  @click="closeProject" class="two">取消</view>
	</uni-popup>
</template>

<script setup>
	import { onLoad } from '@dcloudio/uni-app';
import { ref, shallowRef } from 'vue';
import { aCharacterApi } from '../../../api/teamDoctor';
	//_id
	const roleId =ref({})
	//角色数据
	const roleData =ref({})
	onLoad((options) => {
	    console.log(options); 
		roleId.value = options._id
		 aCharacter ()
	})
	
	function aCharacter (){
		aCharacterApi({_id:roleId.value}).then(res=>{
			if(res.code == 200){
				roleData.value =res.data
				console.log(roleData.value);
			}
		})
	}
	
	
	//跳转申请服务
	function toApplyForServices (_id){
		uni.navigateTo({
			url:`/minePackage/pages/ApplyForServices/ApplyForServices?_id=${_id}`
		})
	}
	//跳转至聊天页面
	function toChatlin(){
		uni.navigateTo({
			url:'/minePackage/pages/ChatInterface/ChatInterface'
		})
	}
	
	
	
	
	const serviceProject =shallowRef({})
	
	const openProject =()=>{
		serviceProject.value?.open()
	}
	const closeProject=()=>{
		serviceProject.value?.close()
	}
	
	
</script>

<style scoped lang="scss">
	.header{
		display: flex;
		image{
			width: 220rpx;
			height: 220rpx;

		}
	}
.text-doctor{
	display: flex;
} 

.one{
	width: 176rpx;
	height: 176rpx;
	background-color: rgb(41, 132, 248);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	border-radius: 16rpx;
	image{
		width: 52rpx;
		height: 48rpx;
	}
	text{
		font-size: 28rpx;
		color: #fff;
	}
}
.body{
	display: flex;
	justify-content: space-evenly;
	margin-top: 40rpx;
}
.eject-role{
	width: 100%;
	background-color: #fff;
	height: 112rpx;
	margin-bottom: 20rpx;
	line-height: 112rpx;
	text-align: center;
	margin: auto;
}
.two{
	width: 100%;
	background-color: #fff;
	height: 112rpx;
	line-height: 112rpx;
	text-align: center;
}
.tetx{
	border-top: 20rpx;
}
</style>
